class Carousel {
    constructor(tag) {
        // 获取.box元素
        this.tag = document.querySelector(tag);
        // 获取li元素
        this.list = this.tag.querySelectorAll(".img_box>ul>li");
        // 获取左按钮
        this.leftBtn = this.tag.querySelector(".l_btn");
        // 获取右按钮
        this.rightBtn = this.tag.querySelector(".r_btn");
        // 获取小圆点
        this.circle = this.tag.querySelectorAll(".dot_box>span");
        // 获取所有li要移动的类名
        this.arr = ["list01", "list02", "list03", "list04"];
        // 触发点击事件
        this.eventFn();
        // 当前点击的小圆点
        this.index = 0;
        // 上一个小圆点
        this.lastIndex = 0;
    };

    // li全部重新设置类名
    restListFn() {
        this.list.forEach((item, idx) => {
            item.className = this.arr[idx];
        });
    };

    eventFn() {
        let that = this;
        // 一、鼠标移入移出
        this.tag.addEventListener("mouseover", function() {
            clearInterval(that.timer);
            that.timer = null;
        });

        this.tag.addEventListener("mouseleave", function() {
            clearInterval(that.timer);
            that.timer = setInterval(function() {
                rightFn();
            }, 1000);
        });

        // 二、点击右按钮事件
        this.rightBtn.addEventListener("click", rightFn);

        // 三、点击左按钮事件
        this.leftBtn.addEventListener("click", leftFn);

        // 四、执行小圆点事件
        circleFn();

        // 五、自动轮播
        function timeFn() {
            if (that.timer) {
                clearInterval(that.timer);
            };
            that.timer = setInterval(function() {
                rightFn();
            }, 1000);
        };
        timeFn();



        // 封装右按钮函数
        function rightFn() {
            // 操作数组 
            // 添加数组最后一个值到第一个值
            that.arr.unshift(that.arr[that.arr.length - 1]);
            // 删除数组的最后一个值
            that.arr.pop();
            // li全部重新设置类名
            that.restListFn();
        }

        // 封装左按钮函数
        function leftFn() {
            // 操作数组 
            // 添加数组第一个值到最后一个值
            that.arr.push(that.arr[0]);
            // 删除数组的第一个值
            that.arr.shift();
            // li全部重新设置类名
            that.restListFn();
        };

        // 封装小圆点事件
        function circleFn() {
            that.circle.forEach(function(item, idx) {
                // 给每个小圆点设置自定义属性
                item.setAttribute("date-num", idx);
                // 点击小圆点
                item.addEventListener("click", function() {
                    console.log(that.arr);
                    // 点击的小圆点和上一个小圆点的距离
                    that.difference = 0;
                    that.index = Number(this.getAttribute("date-num"));
                    that.lastIndex = Number(that.arr.indexOf("list02") - 1);
                    that.difference = Math.max(that.lastIndex, that.index) - Math.min(that.lastIndex, that.index);

                    console.log(that);
                    console.log("index：" + that.index);
                    console.log("lastIndex：" + that.lastIndex);
                    console.log("difference：" + that.difference);

                    // if (that.lastIndex < 0) {
                    //     that.lastIndex = that.arr.length - 1;
                    //     that.index = 0;
                    // }
                    // that.circle[that.lastIndex].classList.remove("dot_active");
                    // that.circle[that.index].classList.add("dot_active");

                    for (that.i = 0; that.i < that.circle.length; that.i++) {
                        that.circle[that.i].classList.remove("dot_active")
                    };
                    that.circle[that.index].classList.add("dot_active");


                    if (that.index > that.lastIndex) {
                        while (that.difference--) {
                            rightFn();
                        };
                    } else {
                        while (that.difference--) {
                            leftFn();
                        };
                    };
                });
            });
        };


    };
};